import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col, Select, DatePicker } from 'antd';
import moment from 'moment'
const FormItem = Form.Item;
const Option = Select.Option;
const Textarea = Input.TextArea;

class WeeklyForm1 extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values, {type1: 'data1', type2: 'modifyRecord1', type3: 'modalVisible1'});
      }
    });
  }

  close = () => {
    if (this.props.modifyRecord) {
      this.props.modifyRecord.expectDate = moment(this.props.modifyRecord.expectDate).format('YYYY-MM-DD');
    }
    this.props.close();
  }

  projectNameChange = (data) => {
    let item = this.props.userProject.find(item => item.name === data);
    this.props.userProjectCode(item.projectCode)
    this.props.form.setFieldsValue({
      projectMembers: item.teamMembers,
      teamHrTime: item.hrTime
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目名称" {...formItemLayout}>
                {getFieldDecorator('projectName', {
                  rules: [{ required: true, message: '请输入项目名称！' }],
                  initialValue: this.props.modifyRecord.projectName
                })(
                  <Select allowClear placeholder="请选择项目名称" onChange={this.projectNameChange}>
                    {
                      this.props.userProject.map((item, index) =>
                        <Option key={index} value={item.name}>{item.name}</Option>
                      )
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目成员" {...formItemLayout}>
                {getFieldDecorator('projectMembers', {
                  rules: [{ required: true, message: '请输入项目成员！' }],
                  initialValue: this.props.modifyRecord.projectMembers
                })(
                  <Input placeholder="项目成员" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目投入人力" {...formItemLayout}>
                {getFieldDecorator('teamHrTime', {
                  rules: [{ required: true, message: '请输入项目投入人力(人天)！' }],
                  initialValue: this.props.modifyRecord.teamHrTime
                })(
                  <Input type="number" min={0} step={1} placeholder="项目投入人力(人天)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem label="项目进展" {...formItemLayout}>
                {getFieldDecorator('projectProgress', {
                  rules: [{ required: true, message: '请输入项目进展(最近一个节点目标)！' }],
                  initialValue: this.props.modifyRecord.projectProgress
                })(
                  <Textarea autosize="true" placeholder="项目进展(最近一个节点目标)" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预期时间" {...formItemLayout}>
                {getFieldDecorator('expectDate', {
                  rules: [{ required: true, message: '请输入项目预期时间！' }],
                  initialValue: this.props.modifyRecord.expectDate
                })(
                  <DatePicker placeholder="项目预期时间" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="是否延期" {...formItemLayout}>
                {getFieldDecorator('projectDelay', {
                  rules: [{ required: true, message: '请选择是否延期！' }],
                  initialValue: this.props.modifyRecord.projectDelay || false
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目目前问题" {...formItemLayout}>
                {getFieldDecorator('problem', {
                  rules: [{ required: true, message: '请输入项目目前问题' }],
                  initialValue: this.props.modifyRecord.problem
                })(
                  <Input placeholder="项目目前问题" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm1);
